<template>
  <div>
    <el-form size="medium" >
      <el-form-item>
        <el-input style="width:400px" placeholder="用户名" v-model="obj.nickname">
          <el-button slot="append" @click="searchData">搜索</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-table
        :key="rk"
        :data="list">
          <el-table-column width="120px" prop="id" label="ID"></el-table-column>
          <el-table-column label="用户">
            <template slot-scope="scope">
              <div class="product-item">
                <vimage :src="scope.row.picurl" style="border-radius:50%;"></vimage>
               <div class="user_info">
                 <span>{{scope.row.nickname}}</span>
                 <span>ID:{{scope.row.user_id}}</span>
               </div>
               
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" width="150px"  label="联系号码"></el-table-column>
          <el-table-column prop="status_text" width="100px"  label="状态"></el-table-column>
          <el-table-column prop="p_nickname" label="上级"></el-table-column>
          <el-table-column prop="create_time" width="200px"  label="加入时间"></el-table-column>
          <el-table-column width="120px" label="操作">
            <template slot-scope="scope">
              <el-button :type="scope.row.checked ? 'primary' : ''" @click="selectItem(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer">
          <el-pagination
            @current-change="changePage"
            class="pages" background hide-on-single-page layout="prev, pager, next" :page-size="size" :total="total">
          </el-pagination>
        </div>
     <!--   <div class="table_footer" v-if="hidden" v-show="list.length > 0">
          <el-button type="primary" @click="outData">选择数据</el-button>
        </div> -->
      </el-form-item>
    </el-form>
    <div class="dialog-footer"  v-if="hidden">
      <el-button @click="outData('close')">取消</el-button>
      <el-button type="primary" @click="outData">确定</el-button>
    </div>
  </div>
</template>

<script>
  import {
    getagentlist,
  } from "@/api/mall/agent"
export default {
  name:'selectUser',
  data() {
    return {
      isLoading:false,
      radio: 1,
      obj:{
        nickname:''
      },
      objTemp:{},
      list:[],
      //outlist:[],
      page:1,
      size:10,
      total:0,
      rk:1
    }
  },
  props: {
    data: {
      type: Array,
      default: function(){
        return [];
      }
    },
    limit: {
      type: Number,
      default: 100
    },
    hidden:{
      type:Boolean,
      default:true
    }
  },
  created(){
  },
  mounted(){
    this.searchData();
  },
  watch:{
    'data':{
      handler:function(){
        //重新过滤数据
        this.list.forEach(e => {
          if(this.data.findIndex(_ => _.id == e.id) > -1){
            e.checked = true;
          }else{
            e.checked = false;
          };
        });
      }
    }
  },
  methods: {
    //搜索数据
    searchData(){
      this.objTemp = Object.assign({},this.obj);
      this.getData();
    },
    //搜索数据本体
    getData(){
      this.isLoading = true;
      getagentlist(this.page,this.objTemp,this.size).then(res => {
        this.isLoading = false;
        this.list = res.msg.data;
        this.total = res.msg.total;
        this.list.unshift({
          id:0,
          nickname:'总店'
        })
        //筛选哪些数据是传入的已选择数据
        this.list.forEach(e => {
          // if(this.data.findIndex(_ => _.id == e.id) > -1){
          //   e.checked = true;
          // };
          if(this.data.findIndex(_ => _.id == e.id) > -1){
            //e.checked = true;
            this.$set(e,'checked',true);
          }else{
            this.$set(e,'checked',false);
          };
        });

      });
    },
    //选择单条记录
    selectItem(item){
      if(!item.checked){
        if(this.data.length < this.limit){
          item.checked = true;
          this.data.push(item);
        }else{
          if(this.limit==1){
            item.checked = true;
            this.data.splice(0,1)
            this.data.push(item);
          }
          // 数据已满
        };

      }else{
        //移除数据
        item.checked = false;
        this.data.splice(this.data.findIndex(_ => _.id == item.id),1);
      };
      this.rk++;

    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
    //确定选择数据
    outData(){
      this.$emit('outData',this.outlist);
      //this.$emit('outData');
    }
  }
}
</script>

<style scoped lang="scss">
.product-item{
  display: flex;
  align-items: center;
  .user_info{
    display: flex;
    flex-direction: column;
  }
  img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
